<script setup>
  import {ref} from "vue";

  const isShow=ref('true')

  const sh=()=>{
    isShow.value=!isShow.value
  }
</script>

<template>
<h1>隐藏显示指令</h1>
<!--  v-if="布尔值"true元素显示，false元素消失
      false表示该元素不会被渲染到DOM中，直接跳过该元素的渲染-->
  <p v-if="true">小红</p>
  <p v-if="false">小黄</p>
  <hr>
  <!--  v-show="布尔值"true元素显示，false元素隐藏
      false是通过修改display:none；CSS属性让元素消失的-->
  <p v-show="true">小绿</p>
  <p v-show="false">小紫</p>

  <p v-if="isShow">太阳</p>
  <p v-else>月亮</p>
  <button @click="sh">按钮</button>
</template>

<style scoped>

</style>